<template>
  <div class="app-container">
    <el-card class="box-card">
      <el-form ref="form" :model="form" >
        <el-descriptions  title="基础信息"  :column="2" border >
          <el-descriptions-item label="姓名"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.username }}</el-descriptions-item>
          <el-descriptions-item label="证件编号"  label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.certificateId }}</el-descriptions-item>
          <el-descriptions-item label="身份证号" :span="2" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.idNumber }}</el-descriptions-item>
        </el-descriptions>
        <br/>
        <el-descriptions  title="预算申请信息"  :column="2" border >
          <el-descriptions-item label="预算科目" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >
            <dict-tag :options="dict.type.yh_budget_account" :value="form.budgetAccount"/>
          </el-descriptions-item>
          <el-descriptions-item label="预算项目"  :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.budgetItems }}</el-descriptions-item>
          <el-descriptions-item label="金额" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.amount }}</el-descriptions-item>
          <el-descriptions-item label="支出内容" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.purpose }}</el-descriptions-item>
          <el-descriptions-item label="报销月份" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.reimbursementMonth }}</el-descriptions-item>
          <el-descriptions-item label="报销情况" :span="1" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.reimbursementApply }}</el-descriptions-item>
          <el-descriptions-item label="备注" :span="2" label-class-name="my-label" :contentStyle='contentStyle' :labelStyle="labelStyle" >{{ form.remark }}</el-descriptions-item>
        </el-descriptions>
      </el-form>
      <br/>
      <div style="float:right; margin-bottom: 15px;">
        <el-button @click="viewCancel">返 回</el-button>
      </div>
    </el-card>
  </div>
</template>

<script>
import { listBudget, getBudget, delBudget, addBudget, updateBudget } from "@/api/module/cjl/budget";
import { treeselect } from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import watermark from "watermark-dom";
export default {
  name: "Budget",
  dicts: ['yh_budget_account'],
  components: { Treeselect },
  data() {
    return {
      contentStyle: {
        'width': '550px',
      },
      labelStyle: { 'width': '100px','color': '#000000','text-align': 'right', },
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 预算申请表格数据
      budgetList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        username: null,
        certificateId: null,
        idNumber: null,
        deptid: null,
        budgetAccount: null,
        budgetItems: null,
        purpose: null,
        amount: null,
        reimbursementMonth: null,
        reimbursementApply: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      },
      // 表单参数
      form: {},

    };
  },
  mounted() {
    watermark.load({ watermark_txt: "  "   });
  },
  created() {
    const id = this.$route.query.id;
    if (id) {
      // 获取表详细信息
      getBudget(id).then(res => {
        this.form = res.data;
      });
    }
  },
  methods: {
    viewCancel() {
      const id = this.$route.query.id;
      getBudget(id).then(response => {
        this.form = response.data;

      });
      const obj = { path: "/zonghe/yygbudget", query: {id} };
      this.$tab.closeOpenPage(obj);
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
  }
};
</script>
<style  lang="scss" scoped>

</style>
